import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import { DEFAULT_LNG, LNG_LIST } from '../../react-i18next-config'
// import Icon from '../../component/Icon'
import Sheet, { AlertAction } from '../../component/sheet'


const Container = styled.div`
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0 1.25rem;
    height: 100%;
`

const Box = styled.div<{ $disabled?: number }>`
    display: flex;
    align-items: center;
    pointer-events: ${({ $disabled }) => $disabled ? 'none' : undefined};
`

const Text = styled.span`
    font-size: 1.0625rem;
    font-weight: 400;
    color: #FFFFFF;
`

// const IconBox = styled(Icon)`
//     width: .875rem;
//     height: .875rem;
//     margin-left: .25rem;
//     margin-top: .0625rem;
// `

const Language: React.FC = () => {
    const { i18n, t } = useTranslation();
    const [show, setShow] = useState(false)

    const defaultLng = useMemo(() => {
        const found = LNG_LIST.find(e => e.key === i18n.resolvedLanguage)
        if (found) {
            return found.short
        }

        return LNG_LIST.find(e => e.key === DEFAULT_LNG)?.key || i18n.resolvedLanguage
    }, [i18n])

    const lngClick = useCallback((key: string) => {
        setShow(false)
        i18n.changeLanguage(key)
    }, [i18n])

    const items = useMemo(() => {
        const actions: AlertAction[] = LNG_LIST.map(item => ({
            key: item.key,
            label: item.short,
            onClick: () => lngClick(item.key)
        }))

        return {
            actions,
            cancel: { key: 'cancel', label: t('modal.cancel'), onClick: () => setShow(false) }
        }
    }, [lngClick, t])

    return <Container>
        <Box
            $disabled={items.actions.length === 1 ? 1 : 0}
            onClick={() => setShow(pre => !pre)}
        >
            <Text>{defaultLng}</Text>
            {/* <IconBox src={IconLNG} /> */}
        </Box>
        <Sheet
            show={show}
            {...items}
            title={t('modal.language')}
        ></Sheet>
    </Container>
}

export default Language